<template>
    <div class="container">
        <div class="data-overview" style="margin-bottom: 16px; height: 257px">
            <div class="data-overview-header">
                实时概况 &nbsp;
                <img src="../../images/overview.png" alt="" class="status_icon" style="" />
            </div>
            <div class="data-overview-container">
                <div class="data-overview-content">
                    <div class="data-overview-item">
                        <div class="data-overview-item__title">今日活跃用户</div>
                        <div class="data-overview-item__num">{{ userloginnumber }}</div>
                    </div>
                    <div class="data-overview-item">
                        <div class="data-overview-item__title">今日新增用户</div>
                        <div class="data-overview-item__num">{{ userregnumber }}</div>
                    </div>
                    <div class="data-overview-line-col"></div>
                    <div class="data-overview-item">
                        <div class="data-overview-item__title">今日收入(元)</div>
                        <div class="data-overview-item__num">{{ nowprice }}</div>
                    </div>
                    <div class="data-overview-item">
                        <div class="data-overview-item__title">今日订单数</div>
                        <div class="data-overview-item__num">{{ noworder }}</div>
                    </div>
                </div>
                <div class="data-overview-content">
                    <div class="data-overview-item">
                        <div class="data-overview-item__title">累计付费用户</div>
                        <div @click="touserlist" class="data-overview-item__num">{{ userpaynumber }}</div>
                    </div>
                    <div class="data-overview-item">
                        <div class="data-overview-item__title">累计用户</div>
                        <div class="data-overview-item__num">{{ usernumber }}</div>
                    </div>
                    <div class="data-overview-line-col" style="margin-bottom: 26px"></div>
                    <div class="data-overview-item">
                        <div class="data-overview-item__title">累计收入(元)</div>
                        <div class="data-overview-item__num">{{ allpay }}</div>
                    </div>
                    <div class="data-overview-item">
                        <!-- <div class="data-overview-item__title">
                            可提现金额(元)
                            <a href="/" class="data-overview-item__link" @click.prevent="schoolTx">提现 <img
                                    src="../../images/arrow-right.png" class="icon-more" /></a>
                        </div>
                        <a href="/" class="data-overview-item__num">{{ schooltxye }}</a> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="course-container">
            <div class="topTitle">
                <div class="title">最近内容</div>
                <el-popover placement="right" width="420" trigger="hover" content="支持直播、视频、音频、图文、电子书、专栏、训练营、会员免费课程暂无订阅量数据">
                    <img slot="reference" src="../../images/tip.png" class="tips-icon header-tips" />
                </el-popover>
            </div>
            <!-- 表格 -->
            <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="name" label="课程名称">
                    <template slot-scope="scope">
                        <div class="course-info-wrapper">
                            <div class="img-wrapper">
                                <!-- <img :src="`${scope.row.cover}`" alt="" class="info-image" /> -->
                                <img :src="scope.row.cover" @error="tabErrorPicture(scope.row.id)" alt="" class="info-image" v-if="scope.row.cover" />
                                <img :src="errorProduct" alt="" class="info-image" v-else />
                                <div class="goods-type-text">会员</div>
                            </div>
                            <div class="info-detail">
                                <div class="title">
                                    <div v-if="scope.row.is_top == 1" class="top-tag">置顶</div>
                                    <span>{{ scope.row.title }}</span>
                                </div>
                                <div class="price">{{ scope.row.price == 0 ? '免费' : '¥ ' + scope.row.price }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="view" label="访问次数" width="200" align="center"></el-table-column>
                <el-table-column prop="sales" label="订阅量" width="200" align="center"></el-table-column>
                <el-table-column prop="favorites" label="学习人数" width="200" align="center"></el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <div class="operation-wrapper">
                            <el-button type="text" @click="totop(scope.row)">{{ scope.row.sort == 99999 ? '取消置顶' : '置顶' }}</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { indexData, getShopUserInfo, getShopPayInfo, addPayOrder,homeindex ,topping} from '../../api/index';
export default {
    data() {
        return {
            query: {
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            pageTotal: 0,
            userloginnumber: 0,
            userregnumber: 0,
            userpaynumber: 0,
            usernumber: 0,
            nowprice: 0,
            noworder: 0,
            allpay: 0,
            schooltxye: 0,
            notice: [],
            errorProduct: require('@/assets/img/noProduct.jpg'), 
        };
    },
    created() {
        this.getData();
        this.getShopUserInfo();
        this.getShopPayInfo();
    },
    methods: {
        tabErrorPicture(id){    // 表格图文封面默认展示图
            let i = this.tableData.findIndex(v => v.id == id);
			this.tableData[i].avatar = this.errorProduct;
        },
        touserlist(){
            this.$router.push({path:"/user_manage/new_user_list"})
        },
        async totop(row){
            let obj={
                id:row.id
            }
            if(row.sort==0){
                obj.sort=99999
            }else{
                obj.sort=0
            }
            let rst=await topping(obj)
            this.getData();
        },
        async getData() {
            let res = await  homeindex(this.query)
            if (res.code == 1) {
                this.tableData = res.data;
                // this.pageTotal = res.pageTotal || 50;
            } else {
                this.$router.push({path: '/login'});
            }                
        },
        getShopUserInfo() {
            getShopUserInfo().then((res) => {
                if (res.code == 1) {
                    this.notice = res.data.notice
                    this.userloginnumber = res.data.userloginnumber;
                    this.userregnumber = res.data.userregnumber;
                    this.userpaynumber = res.data.userpaynumber;
                    this.usernumber = res.data.usernumber;                
                    if (this.notice && this.notice.length > 0) {
                        for (var i = 0; i < this.notice.length; i++) {
                            this.$notify({
                                title: '公告',
                                message: this.notice[i].notice_content,
                                duration: 10000,
                                position: 'bottom-right'
                            });
                        }
                    }
                } else {
                    this.$router.push({path: '/login'});
                }
                
            });
        },
        getShopPayInfo() {
            getShopPayInfo().then((res) => {
                if (res.code ==  1) {
                    this.nowprice = res.data.nowprice;
                    this.noworder = res.data.noworder;
                    this.allpay = res.data.allpay;
                    this.schooltxye = res.data.schooltxye;
                } else {
                    this.$router.push({path: '/login'});
                }
                
            });
        },
        schoolTx() {
            if (this.schooltxye < 0.01) {
                this.$alert('提现金额必须大于0', '消息提示', {
                    confirmButtonText: '确定',
                });
                return;
            }
            let query = {
                orderprice: this.schooltxye
            };
            addPayOrder(query).then((res) => {
                if (res.code == 1) {
                    this.$alert('添加网校提现成功，请耐心等待审核', '消息提示', {
                        confirmButtonText: '确定',
                    });
                    this.getShopPayInfo();
                } else if (res.code == -2) {
                    this.$alert('提现金额必须大于0', '消息提示', {
                        confirmButtonText: '确定'
                    });
                } else {
                    this.$alert('提现失败，请稍后再试', '消息提示', {
                        confirmButtonText: '确定'
                    });
                }
            });
        }
    }
};
</script>

<style scoped>
@import '~@/components/common/css/common.css';

.data-overview {
    position: relative;
    padding: 16px;
    padding-bottom: 6px;
    background: #fff;
    border-radius: 4px;
}

.data-overview .data-overview-header {
    height: 24px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #353535;
    line-height: 24px;
    display: flex;
    align-items: center;
}

.data-overview .data-overview-header .status_icon {
    width: 24px;
    height: 24px;
}

.data-overview .data-overview-container {
    position: relative;
}

.data-overview .data-overview-content {
    display: flex;
    justify-content: space-between;
}

.data-overview .data-overview-item {
    width: 25%;
    background-color: #fff;
}

.data-overview .data-overview-item .data-overview-item__title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: #999999;
}

.data-overview .data-overview-item .data-overview-item__num {
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-bottom: 30px;
    font-weight: bold;
    font-size: 32px;
    transition: color 0.3s;
    cursor: pointer;
    color: #333333;
    font-family: 'ALIBABAFont-Bold';
}

.data-overview .data-overview-line-col {
    margin-left: 40px;
    margin-right: 40px;
    width: 1px;
    background: #eee;
}

.data-overview .data-overview-item .data-overview-item__title .data-overview-item__link {
    display: flex;
    align-items: center;
    margin-left: 8px;
    color: #1472ff;
}

.data-overview .data-overview-item .data-overview-item__title .data-overview-item__link .icon-more {
    width: 16px;
    height: 16px;
}

.data-overview .data-overview-item .data-overview-item__num:hover {
    color: #1472ff;
}

/* 最近内容 */
.course-container {
    position: relative;
    background: #fff;
    padding: 16px 16px 40px 16px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
}

.course-container .topTitle {
    line-height: 22px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.course-container .topTitle .title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 22px;
    margin-bottom: 16px;
}

.course-container .tips-icon {
    position: absolute;
    margin-left: 8px;
    top: 12px;
    width: 16px;
    height: 16px;
}

.course-container .tips-icon.header-tips {
    top: 19px;
}

/* 表格 */
.course-container .course-info-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 64px;
    padding-right: 58px;
    text-align: left;
    cursor: pointer;
}

.course-container .course-info-wrapper .img-wrapper {
    position: relative;
}

.course-container .course-info-wrapper .info-image {
    height: 64px;
    width: 80px;
    border-radius: 4px;
}

.course-container .course-info-wrapper .img-wrapper .goods-type-text {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 0 4px;
    background: rgba(51, 51, 51, 0.5);
    border-radius: 2px;
    font-size: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    text-align: center;
    line-height: 16px;
    color: #ffffff;
}

.course-container .course-info-wrapper .info-detail {
    line-height: 1.5;
    height: 100%;
    margin-left: 8px;
}

.course-container .course-info-wrapper .info-detail .title {
    display: -webkit-box;
    max-width: 100%;
    height: 44px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.course-container .course-info-wrapper .info-detail .title .top-tag {
    display: inline-block;
    width: 32px;
    height: 18px;
    margin-right: 4px;
    background: #1472ff;
    border-radius: 2px;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
}

.course-container .course-info-wrapper .info-detail .price {
    /* width: 100px; */
    font-size: 14px;
    font-weight: 400;
    color: #e65c5c;
}

.course-container .operation-wrapper .el-button--text {
    color: #1472ff;
}
</style>
